<template>
  <div class="chart-container hide-scroller-bar" ref="centerControlEnergy">
    <a-row :gutter="[16, 16]">
      <a-col :span="24" class="total-info">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__pulse"
        >
          <EnergyNumTotal />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <RentersElRank />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <TimeIntervalEl />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <QuotaExecute />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <EnergyTrend />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <ElRate />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <EnergyMonthTrend />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <IntelligentCharge></IntelligentCharge>
        </transition>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  watch,
} from "vue";
import store from "../../../../store/index";
import EnergyNumTotal from "./EnergyNumTotal.vue";
import RentersElRank from "./RentersElRank.vue";
import TimeIntervalEl from "./TimeIntervalEl.vue";
import QuotaExecute from "./QuotaExecute.vue";
import EnergyTrend from "./EnergyTrend.vue";
import ElRate from "./ElRate.vue";
import EnergyMonthTrend from "./EnergyMonthTrend.vue";
import IntelligentCharge from "./IntelligentCharge.vue";
export default defineComponent({
  name: "CenterControlEnergy",
  components: {
    EnergyNumTotal,
    RentersElRank,
    TimeIntervalEl,
    QuotaExecute,
    EnergyTrend,
    ElRate,
    EnergyMonthTrend,
    IntelligentCharge,
  },
  setup() {
    const state = reactive({
      centerControlEnergy: null,
      pageHeight: 900,
      rowHeight: 300,
      rowNum: 2, // 均分的行数
      totalRowNum: 3,
      rowGap: 16,
    });

    const colStyle = computed(() => `height:${state.rowHeight}px`);

    watch(
      () => store.getters.resizeTrigger,
      () => {
        getPageHeight();
      }
    );

    const getPageHeight = () => {
      state.pageHeight = state.centerControlEnergy.offsetHeight;
      state.rowHeight = Math.floor(
        (state.pageHeight - state.pageHeight * 0.12) / state.rowNum -
          state.rowGap -
          6
      );
    };

    onMounted(() => {
      getPageHeight();
    });

    return {
      colStyle,
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.chart-container {
  overflow: hidden auto;
  margin-top: 6px;
  .col-box {
    // height: 40%;
    min-height: 220px;
  }
  .total-info {
    height: 12%;
    min-height: 80px;
  }
}
</style>
